<template>
	<div class="Foot">
		<router-link to="/flower">
			<i class="iconfont iflower">&#xe602;</i>
			<span class="sflower">花儿</span>
		</router-link>
		<router-link to="/flowerspeak">
			<i class="iconfont ispeak">&#xe605;</i>
			<span class="sspeak">花说</span>
		</router-link>
		<router-link to="/LIFE">
			<i class="iconfont life">&#xe874;</i>
			<span class="slife">LIFE</span>
		</router-link>
		<router-link to="/flowershow">
			<i class="iconfont ishow">&#xe60d;</i>
			<span>花现</span>
		</router-link>
		<router-link to="/mine">
			<i class="iconfont imine">&#xe62f;</i>
			<span>我的</span>
		</router-link>
	</div>
</template>
<style type="text/css" lang="less" scoped>
	.Foot{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		padding-bottom:2px;
		z-index: 99;
		box-shadow: 0 -0.2px 0 0 rgba(0,0,0,.6);	
		/*background-image:linear-gradient(90deg,#CAE1FF,#ADD8E6)/*#95a1b7*/;
		background: #fff;
		display: flex;
		a{
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: #95a1b7;
			span{
				font-size: 14px;
			}
			i{			
				font-size: 32px;
				vertical-align: bottom;
			}
			.iflower{
				position: relative;
				bottom: -2px;
				font-size: 30px;
			}
			.sflower{
				margin-top: 3px;
			}
			.ispeak{
				position: relative;
				bottom: -3px;
				font-size: 28px;
			}
			.life{
				position: relative;
			}
			.ishow{

				position: relative;
			}
			.imine{
				position: relative;
				bottom: -3px;
			}
			.sspeak{
				margin-top:5px;
			}
			.slife{
				margin-top: 2px;
			}
		}
		.router-link-active{
			color:#22887d;
		}
		i{
			line-height: normal!important;
		}
	}
</style>

<script type="text/javascript">
	export default{
		data(){
			return{

			}
		},
		components:{

		},
		methods:{

		},
		mouted(){

		}
	}
</script>